<template>
	<a-row>
		<a-form :layout="formLayout"  :form="form"  @submit="handleSubmit">
			<a-card title="基本信息" :bordered="true">
			    <a-row>
			     	<a-col  :lg='5'  :md='12'  :sm='24'>
						<a-form-item
							label="企业名称"
							>
							<a-input placeholder="请输入名称"  v-decorator="['name', baseform.name]" /> 
						</a-form-item> 
					</a-col>
					<a-col  :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='{ span:11,offset:1}'  :sm='24'>
						<a-form-item   
							label="地址"
						>
							<a-input placeholder="请输入地址"  v-decorator="['address']"/> 
						</a-form-item>
				    </a-col>
				    <a-col :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='12'  :sm='24'>
						<a-form-item
							label="电话"
						>
							<a-input placeholder="请输入电话"  v-decorator="['phone']"/> 
						</a-form-item>
					</a-col>
					 <a-col :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='{ span:11,offset:1}'  :sm='24'>
						<a-form-item
							label="邮箱"
						>
							<a-input placeholder="请输入邮箱"  v-decorator="['email']"/> 
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
			     	<a-col  :lg='5'  :md='12'  :sm='24'>
						<a-form-item
							label="网址"
							>
							<a-input placeholder="请输入网址"  v-decorator="['website']" /> 
						</a-form-item> 
					</a-col>
					<a-col  :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='{ span:11,offset:1}'  :sm='24'>
						 <a-form-item
							label="联系人"
							>
							<a-input placeholder="请输入"  v-decorator="['contact']" /> 
						</a-form-item> 
				    </a-col>
				    <a-col :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='12'  :sm='24'>
						 <a-form-item   
							label="联系电话"
						>
							<a-input placeholder="请输入"  v-decorator="['mobile']" /> 
						</a-form-item>
					</a-col>
					 <a-col :xl="{ span: 5, offset: 1 }"  :lg='{ span : 5 ,offset:1}'  :md='{ span:11,offset:1}'  :sm='24'>
						 
					</a-col>
				</a-row> 
				<a-row>
			     	<a-col   :md='11'  :sm='24'>
						<a-form-item   
							label="备注"
						>
							<a-textarea placeholder="请输入"  v-decorator="['remark']"/> 
						</a-form-item> 
					</a-col> 
				</a-row>
			</a-card> 
			<a-card title="账户信息" :bordered="true"  class='mt28'>
		    	<a-button type="dashed"  class='cursor  mt12  w100  mb20'  block  @click='addAccount()' ><a-icon type="plus-circle" />添加</a-button>
		    	<a-table :columns="columns" :dataSource="bizBankAccounts" bordered  :pagination='false'  :rowKey="record => record.code">
		    		
				    <template v-for="col in ['bankName', 'bankAddress', 'accountName','bankAccount','swift','defaultFlag']" :slot="col" slot-scope="text, record, index">
				      <div :key="col"> 
				      	<!-- {{record.index}} 行数怎么确认？-->
				      	<template  v-if="record.editable  ">
				      		<a-radio-group   v-if="col=='defaultFlag'"  :value="record.defaultFlag"   @change="e => handleChangeAccount(e.target.value, col, index)" > 
							      <a-radio value="1">是</a-radio> 
							      <a-radio value="0">否</a-radio> 
						    </a-radio-group>
					         <a-input
					          v-else
					          style="margin: -5px 0"
					          :value="text"
					          
					          @change="e => handleChangeAccount(e.target.value, col, index)"
					        />
				      	</template>
				        <template v-else>
				        	<span  v-if='col=="defaultFlag"'>{{text | commonRadio}}</span>
				        	<span  v-else>{{text}}</span>
				    	</template>
				      </div>
				    </template>
				    
				    <template slot="operation" slot-scope="text, record, index">
				      <div class='editable-row-operations'>
				        <span v-if="record.editable">
				        	<template  v-if='record.add'>
				        		<a   @click="() => addNewAccount(index)"  class='color-blue'>添加</a>
				        		<a-divider type="vertical" />
						        <a-popconfirm title='Sure to delete?' @confirm="() => delAccount(index)">
						            <a  class='color-red'>删除</a>
						        </a-popconfirm>
				        	</template>
				          	<template  v-else>
				          		<a  @click="() => saveAccount(index)"  class='color-blue'>保存</a>
				          		<a-divider type="vertical" />
						        <a-popconfirm title='Sure to cancel?' @confirm="() => cancelAccount(index)">
						            <a  class='color-red'>取消</a>
						        </a-popconfirm>
				          	</template>
				        </span>
				        <span v-else>
				          <a @click="() => editAccount(index)"  class='color-blue'>编辑</a>
				          <a-divider type="vertical" />
				          <a-popconfirm title='Sure to delete?' @confirm="() => delAccount(index)">
				            <a  class='color-red'>删除</a>
				          </a-popconfirm>
				        </span>

				      </div>
				    </template>
				</a-table>
			</a-card>     
			     
			 

			<!-- 隐藏域 -->
			<a-form-item  style='display: none;'>
				<a-input  v-decorator="['supOrBuyer', baseform.supOrBuyer]"  /> 
			</a-form-item>
			<a-form-item  style='display: none;'  v-if='isEdit == true'>
				<a-input  v-decorator="['code']"  /> 
			</a-form-item>
			<a-form-item  class='mt28'
			>
				<a-button type="primary"  html-type="submit"  class='mr20'>
					提交
				</a-button>
				<router-link to='/customer'>
				<a-button >
					取消
				</a-button></router-link>
			</a-form-item>
		</a-form>
	</a-row>
</template>

<script>
	import  { submitEnt,DetailEnt }  from '@/api/customer/index'

	import  fileUpload  from  '@/components/common/fileUpload'
	/*联系人表格 columns*/
const columns = [{
  title: '银行名称',
  dataIndex: 'bankName',
  width: '15%',
  scopedSlots: { customRender: 'bankName' },
}, {
  title: '银行地址',
  dataIndex: 'bankAddress',
  width: '15%',
  scopedSlots: { customRender: 'bankAddress' },
}, {
  title: '账户名称',
  dataIndex: 'accountName',
  width: '15%',
  scopedSlots: { customRender: 'accountName' },
},
 {
  title: '账户',
  dataIndex: 'bankAccount',
  width: '15%',
  scopedSlots: { customRender: 'bankAccount' },
},  {
  title: 'SWIFT',
  dataIndex: 'swift',
  width: '15%',
  scopedSlots: { customRender: 'swift' },
}, {
  title: '是否设为默认',
  dataIndex: 'defaultFlag',
  width: '12%', 
  scopedSlots: { customRender: 'defaultFlag' },
}, 
{
  title: '操作',
  dataIndex: 'operation',
  scopedSlots: { customRender: 'operation' },
}]

export default {
  name: 'agencyAdd',
  data () {
    return {
    	/*form  布局*/
      	formLayout:'vertical',
      	/*form-rule*/
	    baseform:{
	    	supOrBuyer:{ initialValue : 1},
      		name: {rules: [{ required: true, message: '请输入项目名称' },{ whitespace : true ,message:'当前输入不能为空'}]},
      	},
      	 

		bizBankAccounts:[],/*银行账户 data*/
      	columns,/*联系人表格 columns*/    
      	count : 0,      
      	isEdit:false,
                        
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
    
  },
  created(){
  	let initpath = this.$route.path 
  	if(initpath == '/agency/edit'){
	  			this.isEdit = true
	  			this.pageInit(this.$route.query.code)
	  	}
	  	else{
	  		this.isEdit = false
	  		this.baseform.code = ''
	  	}
  },
  methods:{
  		async pageInit(code){
	  		await DetailEnt(code).then((res)=>{
	  			if(res.data.flag == true){
	  				let data = res.data.data
	  				/******* 请求信息回填处理S*******/
	  				this.form.setFieldsValue({
	  					/*隐藏域 编辑*/
				        supOrBuyer:'4',
		    			code:data.code,
		    			/*基本信息*/
	      				name: data.name,
			      		address:data.address,
			      		phone:data.phone,
			      		email:data.email, //2
			      		website:data.website,   
			      		contact:data.contact,
			      		mobile:data.mobile,//4 
						remark:data.remark,
				      })
	  				/*过滤账户表格其他信息*/
	  				this.bizBankAccounts = data.bizBankAccounts.map(item => {
					    return {
					        accountName: item.accountName,
					        bankAccount: item.bankAccount, 
					        bankAddress: item.bankAddress, 
					        bankName: item.bankName, 
					        swift: item.swift, 
					        defaultFlag:item.defaultFlag
					    }
					})
   
					  
					/******* 请求信息回填处理e*******/
	  			}
	  		})
	  	},
  	/*提交表单*/
  		handleSubmit (e) {
  			let that = this,url
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					  /*账户信息*/
					  values.bizBankAccounts = this.bizBankAccounts 
					  // console.log('Received values of form: ', values);
					  if(that.isEdit == false){
					  	url = '/op/ent/create_ent'
					  }
					  else{
					  	url = '/op/ent/modify_ent'
					  }
				  
					submitEnt(url,values).then((res)=>{
					  	if(res.data.flag == true){
					  		that.$message.success(res.data.msg)
					  		that.$router.push('/agency')
					  	} 
					  })
				}
				else{
					console.log(err)
				}
			});
		},
		/*功能函数*/  

	    // 添加银行账户
	    addAccount () {
	    this.count = this.bizBankAccounts.length
	      let newData  = {
	      		editable:true,
	      		add:true,
		        bankName:'',
		        bankAddress: '',
		        accountName: '',
		        bankAccount: '',
		        swift: '',
		        defaultFlag:''
	      }
	      this.bizBankAccounts = [newData,...this.bizBankAccounts]
	    },
	    /*值改变，更新data*/
	    handleChangeAccount (value, column,index) {
	      const newData = [...this.bizBankAccounts]
	      const target = newData.filter((item,ind) => index === ind)[0]
	      if (target) {
	        target[column] = value
	        this.bizBankAccounts = newData
	      }
	    },
	    editAccount (index) {
	      const newData = [...this.bizBankAccounts]
	      const target = newData.filter((item,ind) => index === ind)[0]
	      if (target) {
	        target.editable = true
	        this.bizBankAccounts = newData//更新data中列的可编辑状态
	      }
	    },
	    saveAccount ( index) {
	      const newData = [...this.bizBankAccounts]
	      const target = newData.filter((item,ind) => index === ind)[0]
	      if (target) {
	        delete target.editable
	        this.bizBankAccounts = newData
	        this.cacheData = newData.map(item => ({ ...item }))
	      }
	    },
	    addNewAccount(index){
	    	const newData = [...this.bizBankAccounts]
			const target = newData.filter((item,ind) => index === ind)[0]
			if (target) {
				if(target.accountName =='' && target.bankAccount =='' && target.bankAddress == ''  &&  target.bankName==''  &&  target.swift == ''){
					return this.$message.warning('请输入信息！');
				}
				delete target.editable
				delete target.add
				this.bizBankAccounts = newData
				this.cacheData = newData.map(item => ({ ...item }))
			}
	    },
	    cancelAccount (index) {
	      const newData = [...this.bizBankAccounts]
	      const target = newData.filter((item,ind) => index === ind)[0]
	      if (target) {
	        Object.assign(target, this.cacheData.filter((item,ind1) => index === ind1)[0])
	        delete target.editable
	        this.bizBankAccounts = newData
	      }
	    },
	    delAccount(index){
	      const dataSource = [...this.bizBankAccounts]
	      this.bizBankAccounts = dataSource.filter((item,ind) => ind !== index)
	    },

    	 
	   
  },
	computed: {
		
	},
  components: {
    fileUpload
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*.ant-input{width: 200px;}*/
</style>
